<template>
  <n-drawer class="member-message" v-model:show="active" width="63%">
    <n-drawer-content body-style="--n-body-padding:0">
      <template #header>
        <div class="my-title--primary">短信祝福</div>
      </template>
      <div class="m-card">
        <div class="m-card_top">
          <div class="m-card_top-icon"></div>
          <div class="m-card_top-name">
            <span>西门起</span>
            <span>13343452345</span>
          </div>
        </div>
        <div class="m-card_bottom">
          <span>会员生日: 02-26</span>
          <span>最后发送时间：2020-12-12 20:23:49</span>
        </div>
      </div>
      <div class="m-content">
        <div class="m-content-title">短信内容</div>
        <textarea class="m-content-textarea" placeholder="请输入内容"></textarea>
      </div>
      <template #footer>
        <div class="m-footer">
          <button class="m-footer-btn_cancel my-btn--secondary" @click="active = false">取消</button>
          <button class="my-btn--primary">发送</button>
        </div>
      </template>
    </n-drawer-content>
  </n-drawer>
</template>

<script setup>
  import { inject } from "vue";
  const active = inject('messageDrawerActive');
</script>

<style lang="less">
  .member-message {
    .m-card {
      width: 1110px;
      height: 110px;
      padding: 20px;
      margin:20px 0 20px 20px ;
      background: #d6dae7;

      &_top {
        display: flex;
        align-items: center;
        &-icon {
          width: 48px;
          height: 48px;
          margin-right: 10px;
          background: #FFF;
        }
        &-name {
          font-size: 30px;
          font-weight: bold;
          color: #2E323D;
          >span {
            &:nth-child(1) {
              margin-right: 10px;
            }
          }
        }
      }
      &_bottom {
        margin: 20px 0 0 58px;
        font-size: 24px;
        font-weight: 500;
        color: #4A5060;
        >span {
          &:nth-child(1) {
            margin-right: 220px;
          }
        }
      }
    }

    .m-content {
      margin-left: 20px;
      &-title {
        margin-bottom: 20px;
        font-size: 28px;
        font-weight: bold;
        color: #4A5060;
      }
      &-textarea {
        width: 1110px;
        height: 290px;
        padding: 20px;
        font-size: 24px;
        font-weight: 500;
        color: #999;
        line-height: 36px;
        background: #F5F7FA;
        border-radius: 5px;
        resize:none;
        &::placeholder {
          font-size: 24px;
          font-weight: 500;
          color: #999;
        }
      }
    }

    .m-footer {
      display: flex;
      justify-content: flex-end;
      align-items: center;

      &-btn_cancel {
        margin-right: 20px;
        color: #999;
        background: #F8F8F8;
        border: 1px solid #E5E5E5;
      }
    }
  }
</style>